.rank {
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpeg) no-repeat 0 0;
  background-size: 100% 100%;
  color: #FFFFFF;
  overflow: auto; }
  .rank h3 {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0.53333rem 0.53333rem 0.26667rem;
    font-size: 0.58667rem;
    font-weight: 500; }
  .rank .classify {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 0.53333rem;
    font-size: 0; }
    .rank .classify li {
      display: inline-block;
      height: 0.8rem;
      padding: 0 0.18667rem 0 0.53333rem;
      margin-right: 0.2rem;
      margin-bottom: 0.2rem;
      background: rgba(0, 0, 0, 0.69);
      border-radius: 6px;
      line-height: 0.82667rem;
      overflow: hidden; }
      .rank .classify li div {
        float: left;
        font-size: 0.37333rem; }
      .rank .classify li i {
        display: block;
        float: left;
        margin-top: 0.05333rem; }
  .rank .title, .rank .list li {
    display: -webkit-box;
    display: flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 1.52rem;
    padding: 0 0.53333rem;
    border-bottom: 1px solid rgba(153, 153, 153, 0.8);
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center; }
  .rank .title {
    font-size: 0.34667rem; }
  .rank .scroll-container {
    height: 10.66667rem;
    overflow: hidden; }
  .rank .list-wrap {
    height: 100%; }
  .rank .list {
    font-size: 0.4rem; }
  .rank .active {
    color: #FE8247; }
  .rank .switch {
    position: relative; }
    .rank .switch i {
      position: absolute;
      right: 0;
      font-size: 0.34667rem; }
    .rank .switch .mui-icon-arrowup {
      top: 0.10667rem; }
    .rank .switch .mui-icon-arrowdown {
      bottom: 0.10667rem; }
  .rank .btn-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    width: 100%;
    height: 1.33333rem;
    background: rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: 0 0.26667rem 0.8rem 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0.26667rem 0.8rem 0 rgba(0, 0, 0, 0.2);
    -webkit-box-pack: justify;
            justify-content: space-between; }
    .rank .btn-wrap a {
      position: relative;
      display: block;
      width: 50%;
      height: 100%;
      line-height: 1.33333rem;
      text-align: center;
      font-size: 0.42667rem;
      color: #FFF; }
    .rank .btn-wrap a:nth-child(1):after {
      position: absolute;
      right: 0;
      top: 50%;
      width: 1px;
      height: 0.58667rem;
      margin-top: -0.29333rem;
      background: rgba(255, 255, 255, 0.48);
      content: ''; }

.exam-rank .switch, .exam-rank .list span {
  width: 1.73333rem;
  text-align: center; }

.exam-count .switch, .exam-count .list span {
  width: 3.12rem;
  text-align: center; }

.exam-count .title div:nth-child(3), .exam-count .list span:nth-child(3) {
  width: 2.13333rem; }

.area-rank .switch, .area-rank .list span {
  width: 2.4rem;
  text-align: center; }
